<template>
	<view>
		<view id="comment-box" class="comment-box">
			<CommentList :propsList="list" :page="page" :imagesToPreview="imagesToPreview" v-on:change-parent-comment="changeParentComment" v-on:reset-parent-comment="resetParentComment"></CommentList>
		</view>
		<TextInput :propsTextInputPlaceholder="textInputPlaceholder" :textInputValue.sync="textInputValue" :page="page" :propsTextInputFocus="textInputFocus" v-on:direct-comment="directComment"></TextInput>
	</view>
</template>

<script>
	import CommentList from '../../components/comment-list.vue'
	import ListOptions from '../../minxins/list-options.js'
	import CommentCreate from '../../minxins/comment-create.js'
	import TextInput from '../../components/text-input.vue'
	export default {
		data() {
			return {
				page: 'comment-detail',
				imagesToPreview: {},
				textInputPlaceholder: "回复层主",
				textInputValue: "",
				rootId: null,
				pid: null,
				textInputFocus: false
			}
		},
		mixins: [ListOptions, CommentCreate],
		components: {
			CommentList,
			TextInput
		},
		async onLoad(options) {
			this.options = Object.assign({}, this.options, options)
			console.log(options)
			try {
				let result = await this.fetchPageData()
				uni.setNavigationBarTitle({
					title: result.data.data[0].floor_num_human
				})
				this.renderPage(result)
			} catch (error) {
				
			}
			if (options.notification_id && (options.read_at == 'null' || options.read_at == 'undefined')) {
				this.$api.readNotification({__resource_id: options.notification_id})
			}
		},
		methods: {
			async fetchPageData() {
				let params = this.options
				let result = await this.$api.listComment(params)
				if (result.data.root) {
					let root = result.data.root
					root.is_main_floor = 1
					this.rootId = root.id
					this.pid = root.id
					result.data.data.unshift(root);
				}
				if (this.options.page == 1) {
					this.imagesToPreview = {} 
				}
				result.data.data.map(comment => {
					let key = comment.key
					comment.detail.content.map(content => {
					  if (content.type == "image") {
						if (!this.imagesToPreview[key]) {
						  this.imagesToPreview[key] = [];
						}
						this.imagesToPreview[key].push(content.data.url)
					  }
					})
				})
				return result;
			},
			changeParentComment (dataset) {
				if (dataset.is_main_floor == 1) {
					this.resetParentComment()
				} else {
					this.textInputPlaceholder = "回复: " + dataset.username
					this.pid = dataset.id
				}
				this.textInputFocus = true
			},
			resetParentComment () {
				console.log('do resetParentComment')
				this.textInputPlaceholder = "回复层主"
				this.pid = this.rootId
				this.textInputFocus = false
			}
		}
		
	}
</script>

<style lang="scss">
	.comment-box {
		padding-bottom: 100upx;
	}
</style>
